<template>
  <div class="mine">
    <my-head title="个人中心" :back="false"></my-head>
    <div class="mine-top">
      <img
        :src="require('@/assets/images/Pikachu.jpg')"
        alt=""
        class="avatar-icon"
      />
      <h2 class="nick-name" v-if="userInfo">
        {{ userInfo.username }} / {{ userInfo.phone }}
      </h2>
      <h2 class="nick-name" v-else @click="gotoWhere({ name: 'login' })">
        立即登录
      </h2>
    </div>
    <ul class="my-order-tab">
      <li data-enter-time="1645846747" data-click-fun="track_f_134000">
        <img
        src=""
        width="26px"
        height="26px"
        alt=""
        />
        <div class="common-p">电影订单</div>
      </li>
      <li data-enter-time="1645846747" data-click-fun="track_f_759982">
        <img
          src=""
          width="26px"
          height="26px"
          alt=""
        />
        <div class="common-p">商品订单</div>
      </li>
    </ul>

    <van-cell-group class="infolist">
        <template v-if="userInfo">
            <van-cell title="我的关注" value="5" icon="fire-o" is-link  />
            <van-cell title="我的点赞" value="2" icon="like-o" is-link  />
            <van-cell title="我的收藏" value="1" icon="star-o" is-link  />
            <van-cell title="个人信息"  icon="friends-o" is-link  />
            <van-cell title="余额" value="200" icon="gem-o" is-link  />
            <van-cell title="购物车"  :to="{name:'cart'}"  icon="cart-o" is-link  />
            <van-cell title="历史记录"  icon="clock-o" is-link  />
            <van-cell title="修改密码"  :to="{name:'changepass'}"  icon="smile-o" is-link  />
        </template>
        <van-cell title="设置"  icon="setting-o" is-link  />
        <van-cell title="清除缓存"  @click="clearCache"   icon="setting-o" is-link  />
    </van-cell-group>

    <div class="mbtn" v-if="userInfo" >
        <van-button class="logoutbtn" @click="logouAction">退出登录</van-button>
    </div>

    <van-overlay :show="show"  >
        <div class="probox">
            <!-- <van-progress class="pro" color="#f50" track-color="#123456" :percentage="cache" stroke-width="18" /> -->
            <van-circle
              v-if="show"
              v-model="cache"
              :stroke-width="60"
              :rate="100"
              :speed="10"
              :text="cache+' %'" 
            />
        </div>
    </van-overlay>
  </div>
</template>

<script>
var timer = null;
export default {
    data(){
      return {
        show:false,
        cache:0,
      }
    },
    watch:{
      cache(v){
        if(v==100){
          this.show = false;
          this.cache = 0;
          this.$toast("缓存清除完毕!")
        }
      }
    },
    methods:{
      clearCache(){
        this.cache = 0;
        this.show = true;
        // timer = setInterval(()=>{
        //     if(this.cache<100){
        //       this.cache+=2;
        //     }else{
        //       clearInterval(timer)
        //       timer = null;
        //       this.show = false;
        //       this.cache = 0;
        //       this.$toast("缓存清除完毕!")
        //     }
        // },2000)
      },
        logouAction(){
            this.$dialog.confirm({
                title: '操作提示',
                message: '你真的要退出登录吗?',
            })
            .then(() => {
                // on confirm
                this.changeUserInfo(null)
            })
            .catch(() => {
                // on cancel
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.van-overlay{
  z-index:1001;
  .probox{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px;
    ::v-deep .van-circle__text{
      color:#fff !important;
      font-weight: bold;
      }
    .pro{
      position: relative;
    }
  }
}


.mine {
    width: 100%;
    background: #f4f4f4;
    height:100vh;
    overflow: auto;
  &-top {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .avatar-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .my-order-tab {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    li{
        flex:1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        img{
            width:26px;
            height:26px;
        }
        .common-p{
            color: #797d82;
        }
    }
    }

    .mbtn{
        margin:16px;
        .logoutbtn{
            width:100%;
        }
    }
}
</style>